<template>
<el-dialog
  :title="title"
  :visible="visible"
   width="850px" append-to-body
  @close="close" :close-on-click-modal="false">
  <el-form :model="form" :rules="rules" ref="form" :inline="true" label-width="110px">
    <el-form-item label="任务名称" prop="taskName">
        <el-input placeholder="请输入任务名称" v-model="form.taskName"  style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="监测对象类型" prop="taskObject">
       <el-select v-model="form.taskObject" placeholder="请选择监测对象类型" style="width:280px">
            <el-option
            v-for="item in taskObjectList"
            :key="item.generalCode"
            :label="item.categoryName"
            :value="item.generalCode">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="流域名称" prop="taskBasin">
        <tree-select
             clearable
            ref="treeSelectDept"
            :width="280"
            :checkedKeys="taskBasinCheckedKeys"
            placeholder="请选择流域名称"
            :text-formatter="val => `${val ? val.text : ''}`"
            :data="taskBasinList"
            @change="taskBasinChange"
            :defaultProps="{
              id: 'id',
              children: 'children',
              label: 'text'
            }">
       </tree-select>
    </el-form-item>
    <el-form-item label="水体名称" prop="waterName">
        <el-input placeholder="请输入水体名称" v-model="form.waterName"  style="width:280px"></el-input>
    </el-form-item>
        <el-form-item label="企业名称">
        <el-input placeholder="请输入企业名称" v-model="form.companyName" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="排口名称">
        <el-input placeholder="请输入排口名称" v-model="form.outletName" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="经纬度信息">
        <el-input placeholder="请选择经纬度信息" :value="latLng" style="width:215px"></el-input>
        <el-button type="primary" style="margin-left:5px;" size="mini" @click="openMap">选择</el-button>
    </el-form-item>
    <el-form-item label="任务紧急程度" prop="emergencyType">
       <el-select v-model="form.emergencyType" placeholder="请选择任务紧急程度" style="width:280px">
            <el-option
            v-for="item in list"
            :key="item.generalCode"
            :label="item.categoryName"
            :value="item.generalCode">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="任务其他要求">
        <el-input placeholder="请输入任务其他要求" v-model="form.requirement" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="任务接收队伍" prop="pointCode">
        <el-select v-model="form.pointCode" placeholder="请选择任务接收队伍" style="width:280px">
            <el-option
            v-for="item in carlist"
            :key="item.pointCode"
            :label="item.pointName"
            :value="item.pointCode">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="任务地点">
     <el-input placeholder="请输入任务地点" v-model="form.placeName"
      type="textarea" :rows="2" style="width:685px"></el-input>
    </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
  </span>
    <lnglat-select ref="mainMap" :lng="form.longi" :lat="form.lat"
    @getLocation="getLocation" />
</el-dialog>
</template>
<script>

export default {
  data() {
    return {
      content: '',
      visible: false,
      title: '新增任务',
      loading: false,
      isEdit: false,
      carlist: [],
      list: [],
      taskObjectList: [],
      taskBasinCheckedKeys: [],
      taskBasinList: [],
      form: {
        companyName: '',
        taskStatus: 0,
        createTime: '',
        createUser: '',
        emergencyType: '',
        emergencyTypeName: '',
        isSubmmit: '',
        lat: '',
        longi: '',
        outletName: '',
        placeName: '',
        pointCode: '',
        pointName: '',
        requirement: '',
        taskCode: '',
        taskId: '',
        taskName: '',
        waterName: '',
        taskBasin: '',
        taskBasinName: '',
        taskObject: ''
      },
      rules: {
        taskName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        taskObject: [
          { required: true, message: '请选择监测对象类型', trigger: 'blur' }
        ],
        waterName: [
          { required: true, message: '请输入水体名称', trigger: 'blur' }
        ],
        taskBasin: [
          { required: true, message: '请选择流域名称', trigger: 'change' }
        ],
        emergencyType: [
          { required: true, message: '请选择任务紧急程度', trigger: 'blur' }
        ],
        pointCode: [
          { required: true, message: '请选择任务接收队伍', trigger: 'blur' }
        ]
      }

    };
  },
  computed: {
    latLng() {
      if (this.form.lat && this.form.longi) {
        return this.form.longi + ',' + this.form.lat;
      } else {
        return '';
      }
    }
  },
  methods: {
    validForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      });
    },
    openMap() {
      this.$refs.mainMap.openDialog();
    },
    getLocation(resp) {
      const { lat, lng, address } = resp;
      this.form.lat = lat;
      this.form.longi = lng;
      this.form.placeName = address;
    },
    async submit() {
      await this.validForm();
      const isEdit = this.isEdit;
      const url = isEdit
        ? `/api/ems/task/update`
        : `/api/ems/task/add`;
      const params = {
        url,
        type: 'post',
        params: this.form

      };
      this.loading = true;
      this.$ajax(params).then(resp => {
        this.loading = false;
        const { result } = resp;
        if (result) {
          this.close();
        }
        this.$emit('refresh');
      });
    },
    taskBasinChange(val) {
      console.log(val);
      if (val) {
        this.form.taskBasin = val.id;
        this.form.taskBasinName = val.text;
      }
      console.log(this.form, this.form.taskBasin, this.form.taskBasinName);
    },
    getTaskBasinList() {
      const params = {
        url: `/api/ems/river/list`,
        type: 'post'
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.taskBasinList = rows;
        }
      });
    },
    getData() {
      const params = {
        url: `/api/ems/dictionary/info/list?categoryclass=taskEmergency&type=1`,
        type: 'post',
        params: {

        }
      };
      this.$ajax(params).then(resp => {
        this.list = resp;
      });
    },
    getMonitorTypeData() {
      const params = {
        url: `/api/ems/dictionary/info/list?categoryclass=taskObject&type=1`,
        type: 'post',
        params: {

        }
      };
      this.$ajax(params).then(resp => {
        this.taskObjectList = resp;
      });
    },
    getCarList() {
      const params = {
        url: `/api/ems/station/dropdown`,
        type: 'post',
        params: this.form
      };
      this.$ajax(params).then(resp => {
        this.carlist = resp;
      });
    },
    openDialog() {
      this.isEdit = false;
      this.visible = true;
      this.title = '新增任务';
    },
    openDialogByEdit(row) {
      this.title = '编辑任务';
      this.isEdit = true;
      this.visible = true;
      for (const key in row) {
        this.form[key] = row[key];
      }
      this.taskBasinCheckedKeys = row.taskBasin ? [row.taskBasin] : [];
    },
    close() {
      this.visible = false;
      for (const key in this.form) {
        this.form[key] = '';
      }
      this.taskBasinCheckedKeys = [];
      this.$refs.form.resetFields();
    }

  },
  created() {
    this.getCarList();
    this.getMonitorTypeData();
    this.getTaskBasinList();
    this.getData();
  }
};
</script>

<style >

</style>